<template>
  <!-- 顶部栏 -->
  <div style=" background-image: url('/static/images/background.png');
               background-size: cover;
               background-repeat: no-repeat;
               background-position: center;
               height: 70vh;
  ">
    <div class="top-bar">
      <h2>健身房管理系统</h2>
      <div class="user-info">
        <el-avatar v-if="isLoggedIn" :src="userAvatar" />
        <el-dropdown style="border: 0">
          <span style="font-size: large;">{{ userName }}
            <el-icon>
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <!-- 未登录时显示“点击登录” -->
              <el-dropdown-item v-if="!isLoggedIn" @click="goToLogin">点击登录</el-dropdown-item>
              <!-- 登录后显示“个人信息”和“退出登录” -->
              <el-dropdown-item v-if="isLoggedIn" @click="goToUserDetails">个人信息</el-dropdown-item>
              <el-dropdown-item v-if="isLoggedIn" @click="goToPayOrders">我的订单信息</el-dropdown-item>
              <el-dropdown-item v-if="isLoggedIn" @click="logOut">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!-- 轮播图 -->
    <el-carousel :interval="5000" arrow="always" class="carousel-container">
      <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
          <img :src="getStaticImage(item.image)" alt="轮播图" class="carousel-image" />
      </el-carousel-item>
    </el-carousel>
    <!-- 导航栏 -->
    <el-menu
        mode="horizontal"
        default-active="1"
        background-color="#404040" text-color="#ffffff" active-text-color="#ffd04b"
        class="nav-menu"
        router
    >
      <el-menu-item index="/gym/index" style="padding: 0 30px;">
        首页
      </el-menu-item>
      <el-sub-menu index="2" style="padding: 0 30px;">
        <template #title>
          <span>课程管理</span>
        </template>
        <el-menu-item index="/gym/course">查看课程</el-menu-item>
        <el-menu-item index="/gym/record" @click="checkAuth()">选课记录</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="/gym/health" style="padding: 0 30px;" @click="checkAuth()">
        健康状况
      </el-menu-item>
      <el-menu-item index="/gym/about" style="padding: 0 30px;">
        关于我们
      </el-menu-item>
    </el-menu>

    <el-main style="height: calc(100vh - 60px); padding: 0; overflow-y: auto; color: black;">
      <div style="padding: 20px;background-color: #dddddd">
        <router-view/>
      </div>
    </el-main>

    <el-footer style="background-color: #404040; color: #ffffff; text-align: center; padding: 10px;">
      <i>Copyright © 冰原F4小组<br>健身房管理系统</i>
    </el-footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import router from "@/router";
import { ArrowDown } from "@element-plus/icons-vue";
const carouselItems = [
  { image: 'banner1', link: '#' },
  { image: 'banner2', link: '#' },
  { image: 'banner3', link: '#' }
];
// 获取静态图片路径（避免动态拼接导致频繁刷新）
const getStaticImage = (imageName) => {
  return `/static/images/carousel/${imageName}.png`;
};
// 用户信息
const userAvatar = ref('/static/images/user.png'); // 用户头像路径
const userName = ref('未登录'); // 用户名
const isLoggedIn = ref(false); // 是否登录

// 检查登录状态
const checkAuth = () => {
  const uname = localStorage.getItem('uname');
  if (uname) {
    userName.value = uname;
    isLoggedIn.value = true;
  } else {
    userName.value = '未登录';
    isLoggedIn.value = false;
  }
};

// 跳转到登录页
const goToLogin = () => {
  router.push('/login');
};

// 跳转到个人信息页
const goToUserDetails = () => {
  router.push('/gym/details');
};

const goToPayOrders = () => {
  router.push('/gym/payOrders');
};
// 退出登录
const logOut = () => {
  localStorage.removeItem('role');
  localStorage.removeItem('uname');
  localStorage.removeItem('uid');
  checkAuth();
  ElMessage.success('已退出登录');
  router.push('/login');
};

// 页面加载时检查登录状态
onMounted(() => {
  checkAuth();
});
</script>


<style scoped>
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #2e2d2d;
  border-bottom: 1px solid #e4e7ed;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.carousel-container {
  margin: 20px 150px;
  height: 300px;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.nav-menu {
  display: flex;
  border-bottom: none;
}

.nav-menu .el-menu-item,
.nav-menu .el-sub-menu__title {
  font-size: 16px;
  height: 60px;
  line-height: 60px;
  padding: 0 50px !important;
}

/* 悬停时背景色变化 */
.nav-menu .el-menu-item:hover,
.nav-menu .el-sub-menu__title:hover {
  background-color: #585858 !important;
}

/* 激活状态背景色变化 */
.nav-menu .el-menu-item.is-active,
.nav-menu .el-sub-menu.is-active .el-sub-menu__title {
  background-color: #585858 !important;
}

el-dropdown :hover{
  border: 0;
}

</style>
